<script setup>
// 定义响应式数据
const message = ref('');
const text1 = ref('');
const hidden = ref(true);

/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  message.value = options.message || '网络繁忙';
  if (options.err) {
    text1.value = options.err;
    hidden.value = false;
  }
});

// 返回首页
const goHome = () => {
  uni.reLaunch({
    url: '/pages/home/home',
    fail: (err) => {
      console.error(`导航失败: ${err.errMsg}`);
    }
  });
};
</script>

<template>
  <view class="wrap">
    <image class="img" src="@/static/images/icon_error.png"></image>
    <text class="p1">{{ message }}\r\n</text>
    <text v-if="!hidden" class="p2">{{ text1 }}</text>
  </view>
  <view class="go" @click="goHome">
    <view class="scanText">返回首页</view>
  </view>
</template>

<style lang="scss">
$light-color: #ececec;
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: $light-color;
}
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  .img {
    margin-top: 180rpx;
    width: 10rem;
    height: 10rem;
  }
  .p1 {
    margin-top: 30rpx;
    font-size: 34rpx;
    color: #000;
  }
  .p2 {
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #f00;
  }
}
.go {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 100rpx 0 0 50rpx;
  width: 650rpx;
  height: 90rpx;
  border-radius: 60rpx;
  background-color: #2185f5;
  .scanText {
    color: #fff;
    font-size: 36rpx;
    line-height: 80rpx;
    text-align: center;
  }
}
</style>
